<template>
  <div class="main">
    <header-img />
    <p class="title">
      <i></i>
      出发城市:{{ fromInfo.city_name }}
    </p>
    <div class="from" v-if='fromInfo.low_in_desc&&fromInfo.out_desc'>
      <div class="inTip">
        <p class='title'>返京注意</p>
        <div>{{ fromInfo.low_in_desc }}</div>
      </div>
      <div class="outTip">
        <p class='title'>外出注意</p>
        <div>{{ fromInfo.out_desc }}</div>
      </div>
    </div>
    <div class='err' v-else>抱歉,当日请求访问上限,请明日再来</div>

    <p class="title">
      <i></i>
      到达城市:{{ toInfo.city_name }}
    </p>
    <div class="to" v-if='toInfo.low_in_desc&&toInfo.out_desc'>
      <div class="inTip">
        <p class='title'>返京注意</p>
        <div>{{ toInfo.low_in_desc }}</div>
      </div>
      <div class="outTip">
        <p class='title'>外出注意</p>
        <div>{{ toInfo.out_desc }}</div>
      </div>
    </div>
    <div class='err' v-else>抱歉,当日请求访问上限,请明日再来</div>
  </div>
</template>

<script>
import api from '../api/index'
import HeaderImg from '@/components/HeaderImg.vue'
export default {
  props: {
    citys: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  components: {
    HeaderImg
  },
  data () {
    return {
      fromInfo: {},
      toInfo: {}
    }
  },
  mounted () {
    api
      .springTravelQuery({
        from: this.citys[0].value,
        to: this.citys[1].value,
        key: '38122e8fe723fc3ed7c13e07a2a7d669'
      })
      .then((res) => {
        this.fromInfo = res.data.result.from_info
        this.toInfo = res.data.result.to_info
      }).catch((res) => {})
  }
}
</script>

<style lang='scss' scoped>
.main {
  overflow: hidden;
  width: 100%;
  h3{
      text-align: center;
      padding:5px;
      background: gray;
  }
  >.title {
    padding: 16px;
    font-size: 17px;
    i {
      display: inline-block;
      width: 4px;
      height: 16px;
      background: #4169e2;
      margin-right: 0.1875rem;
      vertical-align: middle;
    }
  }
  .from,
  .to {
    font-size: 14px;
    padding:0 16px 16px;
    .inTip,.outTip {
        margin-bottom: 20px;
      p.title {
        font-weight: bold;
        color:rgb(0, 0, 0);
        padding: 0 0px 10px;
        font-size: 15px;
      }
      div {
        text-indent: 2rem;
      }
    }
  }
  .err{
      padding:16px;
      font-size: 15px;
  }
}
</style>
